import React, { Component } from 'react';
import './fenlei.scss'
import logo from './logo.svg'
import { category_list, category_subcate } from './utils/api'


class fenlei extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            arr: [
                {
                    tab: [],
                    goods: []
                }
            ],
            tabbar: [
                { name: '店铺', logo },
                { name: '分类', logo },
                { name: '全部商品', logo },
                { name: '购物车', logo },
                { name: '个人中心', logo },
            ]
        }
    }
    handleClick(index) {
        this.setState({
            currentIndex: index
        }, () => {
            //二三级分类
            category_subcate({ id: this.state.arr[0].tab[this.state.currentIndex].id }).then((res) => {
                // console.log(res.data.subcate.subcategory);
                this.state.arr[0].goods=res.data.subcate.subcategory;
                this.setState({})
            })
        })
    }
    componentDidMount() {
        //一级分类
        category_list().then((res) => {
            // console.log(res.data);
            this.state.arr[0].tab = res.data.list
            this.setState({})
        })
        //二三级分类
        category_subcate({ id: 225510 }).then((res) => {
            // console.log(res.data.subcate.subcategory);
            this.state.arr[0].goods=res.data.subcate.subcategory;
            this.setState({})
        })
    }
    render() {
        return (
            <div className='App'>
                <h3>分类</h3>
                {/* <MyHeader /> */}
                <div className='inputBox'>
                    <input type="text" placeholder='搜索店铺内商品' />
                </div>
                {/* <MyTab /> */}
                <div className="tab">
                    <div className='tabName'>
                        {
                            this.state.arr[0].tab.map((item, index) => {
                                return (
                                    <div className={`classify ${this.state.currentIndex == index ? 'active' : ''}`} key={index} onClick={() => { this.handleClick(index) }}>
                                        <span>{item.name}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='goods'>
                        {
                            this.state.arr[0].goods.map((item,index) => {
                                return (
                                    <>
                                    <h3 key={index}>{item.name}</h3>
                                        <>
                                        {
                                            item.subNavs.map((a,b)=>{
                                                return(
                                                    <div key={b} className="goodlist">
                                                        <img src={a.pic} alt="" />
                                                        <span>{a.name}</span>
                                                    </div>
                                                )
                                            })
                                        }
                                        </>
                                    </>
                                )
                            })
                        }
                    </div>
                </div>

                {/* <MyTabbar /> */}
                <div className='tabbar'>
                    {
                        this.state.tabbar.map((item, index) => {
                            return (
                                <div className="classify" key={index}>
                                    <img src={item.logo} alt="" />
                                    <span>{item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default fenlei;